<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="40%"
    title="新增"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['base-data:member-level-detail:add']">
      <a-form
        ref="form"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        :model="formData"
        :rules="rules"
      >
        <a-form-item label="会员等级" name="levelId">
          <member-level-selector v-model:value="formData.levelId" />
        </a-form-item>
        <a-form-item label="开始时间" name="beginDate">
          <a-date-picker
            style="width: 100%"
            v-model:value="formData.beginDate"
            placeholder="开始时间"
            value-format="YYYY-MM-DD HH:mm"
            :show-time="{ format: 'HH:mm' }"
          />
        </a-form-item>
        <div class="form-modal-footer">
          <a-space>
            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
              >保存</a-button
            >
            <a-button :loading="loading" @click="closeDialog">取消</a-button>
          </a-space>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { CreateMemberLevelDetailVo } from '@/api/base-data/member-level-detail/model/createMemberLevelDetailVo';
  import MemberLevelSelector from '@/components/Selector/src/MemberLevelSelector.vue';
  import * as api from '@/api/base-data/member-level-detail';

  const emits = defineEmits(['close']);

  const props = defineProps({
    memberId: {
      type: String,
      required: true,
    },
  });

  // 表单对象
  const form = ref();

  // 是否可见
  const visible = ref(false);
  // 是否显示加载框
  const loading = ref(false);
  // 表单数据
  const formData = ref<CreateMemberLevelDetailVo>({
    memberId: '',
    levelId: '',
    beginDate: '',
  });
  // 表单校验规则
  const rules = ref({
    levelId: [{ required: true, message: '请选择会员等级' }],
  });

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
    initFormData();
  };

  // 初始化表单
  const initFormData = () => {
    formData.value.memberId = props.memberId;
    formData.value.levelId = '';
    formData.value.beginDate = '';
  };

  // 提交表单
  const submit = () => {
    form.value.validate().then((valid) => {
      if (valid) {
        loading.value = true;
        api
          .create({
            ...formData.value,
          })
          .then(() => {

          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  };

  const closeDialog = () => {
    visible.value = false;
    emits('close');
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
